<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>工业代表</title>
    <link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/iview@2.12.0/dist/styles/iview.css"> -->

    <script src="${contextPath}/static/statistics/js/jquery.js"></script>
    <script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
    <script src=${contextPath}/static/layer/layer.js></script>
    <script src="${contextPath}/static/statistics/js/echarts.min.js"></script>

    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/iview@2.12.0/dist/iview.min.js"></script>

    <style type="text/css">
        body {
            background-color: #0c2a52;
        }
        .zc-container {
            text-align: center;
        }
        .zc-title {

        }
        .col-left {
            text-align: left;
        }
        .col-center {
            text-align: center;
        }

        .zc-zb-box {
            overflow: hidden;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: baseline;
            -ms-flex-align: baseline;
            align-items: baseline;
            /*padding: 20px;*/
            padding: 30px 5px 30px 5px;
        }
        .zc-zb-name {
            font-size: 15px;
            color: #dcdcdc;
            line-height: 16px;
        }
        .zc-zb-num {
            font-size: 37px;
            color: #fff;
            line-height: 48px;
            margin-left: 20px;
        }
        .zc-zb-pc {
            font-size: 25px;
            color: green;
            line-height: 35px;
            margin-left: 15px;
        }
        .zc-zb-change {
            margin-left: 10px;
        }
        .zc-map {
        }
        .right-zb-box{

        }

        @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
            .masked{
                background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                -webkit-background-size: 200% 100%;
                -webkit-animation: masked-animation 4s infinite linear;
            }
        }
        @-webkit-keyframes masked-animation {
            0%  { background-position: 0 0;}
            100% { background-position: -100% 0;}
        }
    </style>
</head>
<body>
<div class="container-fluid zc-container">
    <div class="row">
        <div class="col-sm-12 zc-title">
            <h1 style="color: #e2e2e2;">工业代表<small>年度销售数据</small></h1>
        </div>
    </div>
    <hr style="border-top: 1px solid #ccc;">
    <div class="row">
        <div class="col-sm-3 con-left" id="app">
            <div class="zc-zb-box">
                <select class="form-control" v-model="selectGoYe" style="color: #fff;background-color: #0c2a52">
                    <option value="">所有工业</option>
                    <option v-for="gy in gongYe" :value="gy.name">{{gy.name}}</option>
                </select>
            </div>
            <div class="zc-zb-box">
                <div class="zc-zb-name">当年销量：</div>
                <div class="zc-zb-num masked">{{numData.goYeQ}}</div>
            </div>
            <div class="zc-zb-box">
                <select class="form-control" v-model="selectProduct" style="color: #fff;background-color: #0c2a52">
                    <option value="">在销品规</option>
                    <option v-for="prod in product" :value="prod.code">{{prod.name}}</option>
                </select>
            </div>
            <div class="zc-zb-box">
                <div class="zc-zb-name">在销店铺：</div>
                <div class="zc-zb-num masked">{{numData.shopQ}}</div>
            </div>
            <div class="zc-zb-box">
                <div class="zc-zb-name">计划销量：</div>
                <div class="zc-zb-num masked">{{numData.jiHuaQ}}</div>
            </div>
            <div class="zc-zb-box">
                <div class="zc-zb-name">实际销量：</div>
                <div class="zc-zb-num masked">{{numData.shiJiQ}}</div>
            </div>
            <div class="zc-zb-box">
                <div class="zc-zb-name">完成比例：</div>
                <div class="zc-zb-num masked">{{numData.WCBL}}</div>
            </div>
        </div>
        <div class="col-sm-6 col-center">
            <div class="zc-map" id="zc-map"></div>
        </div>
        <div class="col-sm-3">
            <div class="row statistics-box">
                <div class="col-sm-12 main" id="main1"></div>
            </div>
            <div class="row statistics-box">
                <div class="col-sm-12 main" id="main2"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=ec3688cc2547017ad39dd55153d18b85"></script>
<script>

    // 高度设置
    $('#zc-map').height($('#zc-map').width()*1);
    {
        var total = $(document).height();
        $('.main').height(total*0.36);
    }


    //初始化地图
    var map = new AMap.Map('zc-map',{
        resizeEnable: true,
        zoom: 12,
        mapStyle: 'amap://styles/grey',
        center: [116.39,39.9]//new AMap.LngLat(116.39,39.9)
    });
    AMap.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.MapType'], function() {
        toolBar = new AMap.ToolBar();  //工具条
        scale = new AMap.Scale();    //比例尺
        map.addControl(toolBar);
        map.addControl(scale);
    });
    var infoWindow = new AMap.InfoWindow();

    //初始化统计图
    var myChart1 =  echarts.init($("#main1")[0]);
    var myChart2 =  echarts.init($("#main2")[0]);

    //vue实例
    new Vue({
        el: '#app',
        data: {
            markerList : [],
            gongYe:[],
            product:[],
            selectGoYe: '',
            selectProduct: '',
            numData:{
                goYeQ: 0,
                shopQ : 0,
                jiHuaQ: 0,
                shiJiQ: 0,
                WCBL : '0.00%'
            }
        },
        computed: {

        },
        watch: {
            'selectGoYe': function(newValue) {
                this.selectProduct = '';
                if (newValue) {
                    for (var index in this.gongYe) {
                        var gy = this.gongYe[index];
                        if (gy.name == newValue) {
                            this.product = gy.child;
                            break;
                        }
                    }
                }else {
                    this.product=[];
                }
                this.getData();
            },
            'selectProduct' : function (newValue) {
                this.getData();
            }
        },
        mounted: function () {
            this.getInitData();
            this.getData();
        },
        methods: {
            getInitData : function () {
                var vm = this;
                $.ajax({
                    url: '${contextPath}/shop/getIndustryInitData',
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        if (data.success) {
                            var gys = data.data.gys;
                            vm.gongYe = gys;
                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.msg("网络错误")
                    }
                })
            },
            getData: function () {

                var vm = this;
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/shop/getIndustryData',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: {
                            factoryName: vm.selectGoYe,
                            productCode: vm.selectProduct
                        }
                    },
                    success: function (data) {
                        layer.closeAll('loading');
                        if (data.success) {

                            var shopLocation = data.data.shopLocation;
                            var goYeYearData = data.data.goYeYearData;
                            var productYearData = data.data.productYearData;

                            vm.updateNumData(data.data);
                            vm.updateMap(shopLocation);
                            vm.updateMain1Data(goYeYearData);
                            vm.updateMain2Data(productYearData);




                        } else {
                            layer.msg(data.message)
                        }
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg("网络错误")
                    }
                })
            },
            updateNumData : function (data) {
                this.numData.goYeQ = data.totalQuantity ? data.totalQuantity : '0';
                this.numData.shopQ = data.shopLocation.length ? data.shopLocation.length : '0';
                this.numData.jiHuaQ = data.planQuantity ? data.planQuantity : '0';
                this.numData.shiJiQ = data.totalProductQ ? data.totalProductQ : '0';

                if (this.numData.jiHuaQ != '0') {
                    this.numData.WCBL = (this.numData.shiJiQ/this.numData.jiHuaQ * 100).toFixed(2) + '%'
                }else {
                    this.numData.WCBL = '0.00%'
                }
            },
            updateMap : function (dataArray) {
                console.log(dataArray)
               // dataArray = [
               //      {CUST_CODE:"520201105930",CUST_NAME:"明旺食品经营部",SHORT_NAME:"钟山",SHOP_NAME:"明旺食品经营部",SHOP_ID:"10972",ADDRESS:"贵州省六盘水市钟山区钟山区",LATITUDE:"26.57318",LONGITUDE:"104.88262",IS_EXP:"1"},
               //      {CUST_CODE:"520201105938",CUST_NAME:"钟山区黔兰食品经营部",SHORT_NAME:"钟山",SHOP_NAME:"钟山区黔兰食品经营部",SHOP_ID:"13165",ADDRESS:"贵州省六盘水市钟山区钟山区",LATITUDE:"26.57335",LONGITUDE:"104.88202",IS_EXP:"1"},
               //      {CUST_CODE:"520201106803",CUST_NAME:"钟山区祥瑞烟酒店",SHORT_NAME:"钟山",SHOP_NAME:"钟山区祥瑞烟酒店",SHOP_ID:"11436",ADDRESS:"贵州省六盘水市钟山区钟山区",LATITUDE:"26.56225",LONGITUDE:"104.90809",IS_EXP:"1"},
               //      {CUST_CODE:"520201103571",CUST_NAME:"连兴平价店",SHORT_NAME:"钟山",SHOP_NAME:"连兴平价店",SHOP_ID:"17318",ADDRESS:"贵州省六盘水市钟山区幸福路191号楼附近",LATITUDE:"26.5803",LONGITUDE:"104.89989",IS_EXP:"1"},
               //      {CUST_CODE:"520201101538",CUST_NAME:"吴远伦",SHORT_NAME:"钟山",SHOP_NAME:"吴远伦",SHOP_ID:"17428",ADDRESS:"贵州省六盘水市钟山区红岩路与麒麟路交叉口西北100米",LATITUDE:"26.61788",LONGITUDE:"106.64454",IS_EXP:"0"},
               //      {CUST_CODE:"520201106401",CUST_NAME:"洪英百货",SHORT_NAME:"钟山",SHOP_NAME:"洪英百货",SHOP_ID:"17563",ADDRESS:"贵州省六盘水市钟山区凤凰东路1号附14号",LATITUDE:"26.61788",LONGITUDE:"106.6445",IS_EXP:"0"},
               //      {CUST_CODE:"520201101665",CUST_NAME:"平俊便利店",SHORT_NAME:"钟山",SHOP_NAME:"平价超市",SHOP_ID:"15245",ADDRESS:"贵州省六盘水市钟山区人民东路与金水南路交叉口东200米",LATITUDE:"26.56108",LONGITUDE:"104.91973",IS_EXP:"1"},
               //      {CUST_CODE:"520201107118",CUST_NAME:"馨怡副食店",SHORT_NAME:"钟山",SHOP_NAME:"贵州省六盘水市钟山区教场贵仁路288号",SHOP_ID:"17489",ADDRESS:"贵州省六盘水市钟山区麒麟路11号附80号(布雷尔利旗舰店)",LATITUDE:"26.58439",LONGITUDE:"104.86151",IS_EXP:"0"},
               //      {CUST_CODE:"520201101465",CUST_NAME:"林菊",SHORT_NAME:"钟山",SHOP_NAME:"麦架镇王二便利店",SHOP_ID:"3764",ADDRESS:"贵州省贵阳市白云区麦架镇金鱼桥水库",LATITUDE:"26.71217",LONGITUDE:"106.62284",IS_EXP:"2"},
               //      {CUST_CODE:"520201101413",CUST_NAME:"黄顺先",SHORT_NAME:"钟山",SHOP_NAME:"黄顺先",SHOP_ID:"17150",ADDRESS:"贵州省六盘水市钟山区杨柳街道巴西警察署七号点社区警务室",LATITUDE:"26.59209",LONGITUDE:"104.8922",IS_EXP:"1"},
               //      {CUST_CODE:"520201103346",CUST_NAME:"赵德芬",SHORT_NAME:"钟山",SHOP_NAME:"赵德芬",SHOP_ID:"17298",ADDRESS:"贵州省六盘水市钟山区大湾镇三叉路",LATITUDE:"26.77718",LONGITUDE:"104.61927",IS_EXP:"1"},
               //      {CUST_CODE:"520201106252",CUST_NAME:"华联万家超市",SHORT_NAME:"钟山",SHOP_NAME:"华联万家超市",SHOP_ID:"17280",ADDRESS:"贵州省六盘水市水城县红桥大道与纸红公路交叉口西南150米",LATITUDE:"26.53705",LONGITUDE:"104.90363",IS_EXP:"1"},
               //      {CUST_CODE:"520201106397",CUST_NAME:"利邻便利店",SHORT_NAME:"钟山",SHOP_NAME:"利邻便利店",SHOP_ID:"6453",ADDRESS:"贵州省六盘水市钟山区大连路西100米",LATITUDE:"26.56191",LONGITUDE:"104.84193",IS_EXP:"1"},
               //      {CUST_CODE:"520201106648",CUST_NAME:"双益烟酒副食超市",SHORT_NAME:"钟山",SHOP_NAME:"双益烟酒副食超市",SHOP_ID:"7347",ADDRESS:"贵州省六盘水市钟山区凤凰街道货车绕城环线",LATITUDE:"26.54513",LONGITUDE:"104.87675",IS_EXP:"1"},
               //      {CUST_CODE:"520201105833",CUST_NAME:"家惠超市",SHORT_NAME:"钟山",SHOP_NAME:"优乐购生活超市",SHOP_ID:"12353",ADDRESS:"贵州省六盘水市钟山区康乐南路5号附近",LATITUDE:"26.59551",LONGITUDE:"104.82549",IS_EXP:"1"},
               //      {CUST_CODE:"520201104757",CUST_NAME:"惠彦便利店",SHORT_NAME:"钟山",SHOP_NAME:"惠彦便利店",SHOP_ID:"11718",ADDRESS:"贵州省六盘水市钟山区钟山区",LATITUDE:"26.56728",LONGITUDE:"104.88375",IS_EXP:"1"},
               //      {CUST_CODE:"520201106217",CUST_NAME:"大众烟酒店",SHORT_NAME:"钟山",SHOP_NAME:"大众烟酒店",SHOP_ID:"9320",ADDRESS:"北京市东城区东华门街道缎库胡同52号缎库胡同15号院",LATITUDE:"39.91125",LONGITUDE:"116.40589",IS_EXP:"1"},
               //      {CUST_CODE:"520201100513",CUST_NAME:"宏达烟酒店",SHORT_NAME:"钟山",SHOP_NAME:"薛朝庆",SHOP_ID:"16491",ADDRESS:"贵州省六盘水市钟山区钟山大道与麒麟路交汇处西北侧新世纪大厦一栋一楼118室",LATITUDE:"26.58227",LONGITUDE:"104.86136",IS_EXP:"1"},
               //      {CUST_CODE:"520201100194",CUST_NAME:"香生博雅烟酒店",SHORT_NAME:"钟山",SHOP_NAME:"香生博雅烟酒店 ",SHOP_ID:"17181",ADDRESS:"贵州省六盘水市钟山区富民路与迎新街交叉口北100米",LATITUDE:"26.58518",LONGITUDE:"104.86",IS_EXP:"1"}
               //
               //      ];

                if (!dataArray || dataArray.length ==0) {
                    return;
                }

                // console.log(dataArray[0]);
                // var shopInf = JSON.stringify(dataArray[0]);
                // console.log(dataArray[0].LONGITUDE);

                map.remove(this.markerList);
                map.clearInfoWindow();
                this.markerList = [];

                if (!dataArray || dataArray.length ==0) {
                    return;
                }

                map.setCenter(new AMap.LngLat(dataArray[0].LONGITUDE,dataArray[0].LATITUDE));
                var markerList=[];
                for (var index = 0; index < 100; index++) {
                    var markeInfo = dataArray[index];

                    console.log(markeInfo);

                    <%--var icon = new AMap.Icon({--%>
                        <%--image : '${contextPath}/static/image/marker.png',//24px*24px--%>
                        <%--//icon可缺省，缺省时为默认的蓝色水滴图标，--%>
                        <%--size : new AMap.Size(45,45)--%>
                    <%--});--%>


                    var image = '${contextPath}/static/image/marker.png';//24px*24px
                    // if (markeInfo.IS_EXP == '1') {
                        <%--image = '${contextPath}/static/image/exp.png';--%>
                    // }
                    var icon = new AMap.Icon({
                        image : image,//24px*24px
                        //icon可缺省，缺省时为默认的蓝色水滴图标，
                        size : new AMap.Size(50,38)
                    });

                    console.log(markeInfo.LONGITUDE);
                    console.log(markeInfo.LATITUDE);


                    var marker = new AMap.Marker({
                        icon : icon,//24px*24px
                        position : [markeInfo.LONGITUDE,markeInfo.LATITUDE],
                        title : markeInfo.CUST_CODE,
                        offset : new AMap.Pixel(-12,-12),
                        // animation:'AMAP_ANIMATION_BOUNCE',
                        map: map
                    });

                    marker.content = '专卖证号：'+ markeInfo.CUST_CODE +
                        '<br>客户名称：'+ markeInfo.CUST_NAME +
                        '<br>店铺名称：'+ markeInfo.SHOP_NAME +
                       // '<br>是否试点：'+ (markeInfo.IS_EXP == '1' ? '是':'否') +
                        '<br>店铺地址：'+markeInfo.ADDRESS;

                    AMap.event.addListener(marker, 'click', function(e) {
                        infoWindow.setContent(e.target.content);
                        infoWindow.open(map, e.target.getPosition());


                    });


                    markerList.push(marker);

                }

                this.markerList = markerList;

            },
            updateMain1Data: function (mainData) {
                //if (!main1Data) return;

                //虚拟数据
                /*mainData = [
                    {DELIVER_DATE:'201706',QUANTITY:199},
                    {DELIVER_DATE:'201707',QUANTITY:290},
                    {DELIVER_DATE:'201708',QUANTITY:100},
                    {DELIVER_DATE:'201709',QUANTITY:520},
                    {DELIVER_DATE:'201710',QUANTITY:480},
                    {DELIVER_DATE:'201711',QUANTITY:520},
                    {DELIVER_DATE:'201712',QUANTITY:350},
                    {DELIVER_DATE:'201801',QUANTITY:290},
                    {DELIVER_DATE:'201802',QUANTITY:360},
                    {DELIVER_DATE:'201803',QUANTITY:400},
                    {DELIVER_DATE:'201804',QUANTITY:340},

                ];*/

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var months = ['1','2','3','4','5','6','7','8','9','10','11','12'];
                var quantity17 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                var quantity18 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                for (var index in mainData) {
                    var data = mainData[index];
                    var year_date = data.DELIVER_DATE.toString();
                    var year = year_date.substring(0, 4);
                    var month = year_date.substring(4);
                    var idx;
                    switch (month) {
                        case '01':
                            idx = 0;
                            break;
                        case '02':
                            idx = 1;
                            break;
                        case '03':
                            idx = 2;
                            break;
                        case '04':
                            idx = 3;
                            break;
                        case '05':
                            idx = 4;
                            break;
                        case '06':
                            idx = 5;
                            break;
                        case '07':
                            idx = 6;
                            break;
                        case '08':
                            idx = 7;
                            break;
                        case '09':
                            idx = 8;
                            break;
                        case '10':
                            idx = 9;
                            break;
                        case '11':
                            idx = 10;
                            break;
                        case '12':
                            idx = 11;
                            break;
                        default:
                            ;
                    }
                    if (year == '2017') {
                        quantity17[idx] = (data.QUANTITY/250).toFixed(2);
                    } else if (year == '2018') {
                        quantity18[idx] = (data.QUANTITY/250).toFixed(2);
                    }

                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#f77719', '#32d22a'],
                    title: {
                        text: '总销量',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['2017','2018']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 14
                        },
                        data: months
                    },
                    yAxis: {
                        name: "（箱）",
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'2017',
                            type:'line',
                            data:quantity17
                        },
                        {
                            name:'2018',
                            type:'line',
                            data:quantity18
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option);
            },
            updateMain2Data: function (mainData) {
                //if (!main1Data) return;

                //虚拟数据
                /*mainData = [
                    {DELIVER_DATE:'201703',QUANTITY:49},
                    {DELIVER_DATE:'201706',QUANTITY:99},
                    {DELIVER_DATE:'201707',QUANTITY:90},
                    {DELIVER_DATE:'201708',QUANTITY:100},
                    {DELIVER_DATE:'201709',QUANTITY:120},
                    {DELIVER_DATE:'201710',QUANTITY:80},
                    {DELIVER_DATE:'201711',QUANTITY:20},
                    {DELIVER_DATE:'201712',QUANTITY:50},
                    {DELIVER_DATE:'201801',QUANTITY:90},
                    {DELIVER_DATE:'201802',QUANTITY:60},
                    {DELIVER_DATE:'201803',QUANTITY:100},
                    {DELIVER_DATE:'201804',QUANTITY:30},

                ];*/

                /**
                 * 为了解决数据为空的情况，采用如此方法解决
                 * main1Data:[{name:'00:00-05:59',time:12,quantity:200}]
                 *
                 * */
                var months = ['1','2','3','4','5','6','7','8','9','10','11','12'];
                var quantity17 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                var quantity18 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
                for (var index in mainData) {
                    var data = mainData[index];
                    var year = data.DELIVER_DATE.substring(0, 4);
                    var month = data.DELIVER_DATE.substring(4);
                    var idx;
                    switch (month) {
                        case '01':
                            idx = 0;
                            break;
                        case '02':
                            idx = 1;
                            break;
                        case '03':
                            idx = 2;
                            break;
                        case '04':
                            idx = 3;
                            break;
                        case '05':
                            idx = 4;
                            break;
                        case '06':
                            idx = 5;
                            break;
                        case '07':
                            idx = 6;
                            break;
                        case '08':
                            idx = 7;
                            break;
                        case '09':
                            idx = 8;
                            break;
                        case '10':
                            idx = 9;
                            break;
                        case '11':
                            idx = 10;
                            break;
                        case '12':
                            idx = 11;
                            break;
                        default:
                            ;
                    }
                    if (year == '2017') {
                        quantity17[idx] = (data.QUANTITY/250).toFixed(2);
                    } else if (year == '2018') {
                        quantity18[idx] = (data.QUANTITY/250).toFixed(2);
                    }

                }
                // 指定图表的配置项和数据
                var option = {
                    color: ['#6245f7', '#35b1d2'],
                    title: {
                        text: '单品销量',
                        textStyle: {
                            color:'#909090'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        textStyle: {
                            color:'#c5c5c5'
                        },
                        data:['2017','2018']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 14
                        },
                        data: months
                    },
                    yAxis: {
                        name: "（箱）",
                        nameTextStyle: {
                            color: '#77969a',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 16
                        },
                        splitLine: {
                            show:false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name:'2017',
                            type:'line',
                            data:quantity17
                        },
                        {
                            name:'2018',
                            type:'line',
                            data:quantity18
                        },
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart2.setOption(option);
            },
            managerAmt: function () {
                var payAmt = this.numData.amt;
                if (!payAmt) {
                    return '0元';
                }
                if (payAmt > 100000000) {
                    return (payAmt / 100000000).toFixed(2) + "亿";
                }
                if (payAmt > 10000) {
                    return (payAmt / 10000).toFixed(2) + "万";
                }
                return payAmt
            }
        }
    });
</script>
</body>
</html>